<template>
  <div>
    <Header></Header>
    <div style="max-width: 1200px; margin:auto;padding:10px;">
      <el-row style="margin-top: 45px;margin-bottom: 40px;background-color: white;padding:20px;box-shadow:0 2px 5px 0 rgba(0 0 0 0.05); ">
<!--        <el-col :span="8">-->
          <div style="font-size: 25px;display: inline-block;">
            {{project.name}}&nbsp;
          </div>
          <span v-if="username == project.user" @click="changePublic">
            <el-tooltip v-if="!project.ispublic" class="item" effect="dark" content="私有项目" placement="bottom">
              <i class="el-icon-lock" style="display: inline-block;color: #aaaaaa;cursor: pointer"></i>
            </el-tooltip>
            <el-tooltip v-if="project.ispublic" class="item" effect="dark" content="公开项目" placement="bottom">
              <i class="el-icon-unlock" style="display: inline-block;color: #aaaaaa;cursor: pointer"></i>
            </el-tooltip>
          </span>

<!--        </el-col>-->
<!--        <el-col :span="16">-->
          <div style="display: flex;float: right">


            <div style="display: flex;margin-left: 18px;">
              <div class="btnleft">
                <i class="el-icon-view" style=""></i>
                View
              </div>
              <div class="btnright">
                {{ project.views }}
              </div>
            </div>

            <div style="display: flex;margin-left: 18px;">
              <div class="btnleft" style="cursor: pointer;"@click="swichStar">
                <i v-if="project.isstar" class="el-icon-star-on"></i>
                <i v-if="!project.isstar" class="el-icon-star-off"></i>
                Star
              </div>
              <div class="btnright">
                {{ project.stars }}
              </div>
            </div>

            <div style="display: flex;margin-left: 18px;margin-right: 20px;
    border-right: 1px solid hsla(0,0%,59%,.25);padding-right: 40px;">
              <div class="btnleft" style="cursor: pointer;" @click="clone(project)">
                <i class="ri-git-branch-line"></i>
                Fork
              </div>
              <div class="btnright">
                {{ project.folks }}
              </div>
            </div>
            <div @click="open('jupyter')" style="display: flex;margin-left: 18px;cursor: pointer;" >
              <div class="mybtn">
                启动
              </div>
            </div>
<!--            <div style="display: flex;margin-left: 18px;cursor: pointer;" >-->
<!--              <div class="mybtn">-->
<!--                停止-->
<!--              </div>-->
<!--            </div>-->
            <div @click="open('tensorboard')" style="display: flex;margin-left: 18px;cursor: pointer;" >
              <div class="mybtn">
                TensorBoard
              </div>
            </div>
<!--            <div style="display: flex;margin-left: 18px;cursor: pointer;" >-->
<!--              <el-dropdown style="display: flex">-->
<!--                <div class="btnleft">-->
<!--                  <i v-if="!loading_run" class="el-icon-arrow-down" ></i>-->
<!--                  <i v-if="loading_run" class="el-icon-loading" ></i>-->
<!--                  运行-->
<!--                </div>-->
<!--                &lt;!&ndash;                <div class="btnright">&ndash;&gt;-->
<!--                &lt;!&ndash;                  <i class="el-icon-arrow-down "></i>&ndash;&gt;-->
<!--                &lt;!&ndash;                </div>&ndash;&gt;-->
<!--                <el-dropdown-menu slot="dropdown">-->
<!--                  <el-dropdown-item @click.native="open('jupyter')">jupyter</el-dropdown-item>-->
<!--                  <el-dropdown-item @click.native="open('tensorboard')">tensorboard</el-dropdown-item>-->
<!--                </el-dropdown-menu>-->

<!--              </el-dropdown>-->
<!--            </div>-->
          </div>


<!--        </el-col>-->
      </el-row>
      <div v-if="statu==='loading' && !loading_run" style="text-align: center;margin-top: 100px;color: #cacaca;">
        <i style="font-size: 100px;margin-bottom: 20px" class="el-icon-loading"></i>
        <div>加载中.....</div>
      </div>
      <div v-if="statu==='no_jupyter'" style="
      text-align: center;color: #777777;background-color: white;height: 100px;padding-top: 80px;">
        没有可预览的jupyter文件，点击上方
        <span style="color: #9dc15b">
          运行
        </span>
        项目吧
      </div>
      <iframe @copy.native.capture.prevent='handCopy' v-if="statu==='OK'" :src="'http://152.136.26.199/data/'+id" style="width: 100%;height: 580px;border: medium none;" ></iframe>
    </div>
    <div class="shadow" v-if="loading_run">
      <div style="margin-top: 20%">
        <i class="el-icon-loading" style="font-size: 150px;margin-bottom: 20px;"></i>
        <div v-if="loading_text_change === false">
          加载中，请稍候......
        </div>
        <div v-if="loading_text_change === true">
          正在启动项目，请稍候......
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
export default {
  name: "Project",
  components: {Header},
  data(){
    return{
      id:this.$route.query.id,
      username:localStorage.getItem("username"),
      project:{},
      url:null,
      statu:'loading',
      loaded:false,
      loading_run:false,
      dialogVisible:true,
      loading_text_change:false,
    }
  },
  methods:{
    changePublic(){
      let str = this.project.ispublic?'此操作将项目设置为私有状态，其他人将无权查看，':'此操作将项目公开，其他人可以查看您的项目，但无权修改，'

      this.$confirm(str + '是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios('project/public/'+this.project.id+'/', {
          params: {
            token: localStorage.getItem("token")
          }
        }).then(res => {
          if (res.status === 200) {
            this.$notify({
              type: 'success',
              title: "成功",
              message: '修改成功!'
            });
            this.project.ispublic = !this.project.ispublic;
          }else{
            this.$notify.error({
              title: '错误',
              message: res.data,
            });
          }
        }).catch(err=>{
          this.$notify.error({
            title: '错误',
            message: res.data,
          });
        })
      })
    },
    swichStar(){
      if(this.project.isstar){
        this.unstar(this.project)
      }else{
        this.star(this.project)
      }
    },
    star(pro){
      this.$axios.post('project/star/'+pro.id+"/",{
        token : localStorage.getItem("token")
      }).then(res=>{
        if(res.status === 200){
          this.$notify({
            type: 'success',
            title:"成功",
            message: '收藏成功!'
          });
          pro.stars ++;
          pro.isstar = true
        }else{
          this.$notify.error({
            title: '错误',
            message: res.data,
          });
        }
      })
    },
    unstar(pro){
      this.$axios.delete('project/star/'+pro.id+'/',{
        data:{
          'token':localStorage.getItem("token")
        }
      }).then((res)=>{
        if(res.status === 200){
          this.$notify({
            type: 'success',
            title:"成功",
            message: '取消成功!'
          });
          pro.stars --;
          pro.isstar = false
        }else{
          this.$notify.error({
            title: '错误',
            message: res.data,
          });
        }
      })
    },
    clone(pro){
      this.$confirm('此操作将复制该项目至您的项目列表中, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('project/clone/',{
          token:localStorage.getItem("token"),
          id:pro.id
        }).then(res=>{
          if(res.status === 200){
            this.$notify({
              type: 'success',
              title:"成功",
              message: '克隆成功!'
            });
            pro.folks++;
          }else{
            this.$notify.error({
              title: '错误',
              message: '发生错误',
            });
          }
        })
      })
    },
    open(name){
      this.loading_run = true;
      setTimeout(()=>{
        this.loading_text_change = true;
      },1500);

      this.$axios("project/goto/",{
        params:{
          id:this.id,
          token:localStorage.getItem("token")
        },
      }).then(res=>{
        this.loading_run = false;
        if(res.status === 200){
          console.log(res.data)
          this.url = this.BACK_HOSTNAME+":"+res.data[name]

          window.open(this.url)

          clearInterval(timer)
        }else{
          this.$notify.error({
            title: '错误',
            message: res.data,
          });
        }
      }).catch(e=>{
      })
    },

  },
  mounted() {
    // 直接打开项目
    console.log(this.$route.query.run)
    if(this.$route.query.run == "true"){
      this.open('jupyter');
    }
    this.$axios('project',{
      params:{
        id:this.id,
        token:localStorage.getItem('token')
      }
    }).then(res=>{
      if(res.status === 200){
        this.project = res.data

      }else{
        this.$notify.error({
          title: '错误',
          message: res.data
        });
      }
    })
    this.$axios('project/show/'+this.id+'/',{
      params:{
        token:localStorage.getItem("token")
      }
    }).then(res=>{
      if(res.status === 200) {
        this.statu = 'OK'
      }else if(res.status === 203){
        this.statu = 'no_jupyter'
      }else{
        this.$notify.error({
          title: '错误',
          message: res.data
        });
      }
    })
  },
}
</script>

<style scoped>
.btnleft{
  width: 80px;
  height: 32px;
  line-height: 30px;
  border: 1px solid #739631;
  background-color: #9dc15b;
  font-size: 14px;
  color: #333;
  text-align: center;

}
.btnright{
  padding: 0 12px;
  height: 32px;
  line-height: 30px;
  border: 1px solid #739631;
  border-left:0;
  font-size: 14px;
  color: #739631;
  text-align: center;
}

.mybtn{
  font-size: 14px;
  /*font-weight: bold;*/
  background: #333333;
  color: white;
  padding: 7px 20px;
  transition: all 0.3s;
}
.mybtn:hover{
  background: #9dc15b;
  color: #333333;
  transition: all 0.3s;
  cursor: pointer;
}

.shadow{
  width:100%;
  height:100%;
  position:fixed;
  left:0;
  top:0;
  z-index:998;
  background-color:#000;
  opacity:0.45;
  color: white;
  font-size: 20px;
  text-align: center;
}
</style>